<template>
  <div>
      <!-- 通用工具栏 -->
      <navSearch :show-before="false" :formList="formList" @btnSearch="btnSearch" ref="resetForm">
      </navSearch>
    <el-row>
      <el-col :span="5">
        <el-card class="mCard">
            店铺提现金额：<span>{{storeMoney}}</span>
        </el-card>
      </el-col>
      <el-col :span="5">
        <el-card class="mCard">
            用户提现金额：<span>{{userMoney}}</span>
        </el-card>
      </el-col>
      <el-col :span="5">
        <el-card   class="mCard">
            总提现金额：<span>{{storeMoney+userMoney}}</span>
        </el-card>
      </el-col>
    </el-row>
   <el-table :data="tableData" border>
    <el-table-column prop="transactionType" label="交易类型" align="center">
    </el-table-column>
    <el-table-column prop="storeId" label="店铺ID/用户ID" align="center"></el-table-column>
    <el-table-column prop="storeName" label="店铺名称/昵称" align="center"></el-table-column>
    <el-table-column prop="withdrawalOrder" label="提现单号" align="center"></el-table-column>
    <el-table-column prop="withdrawalAmount" label="提现金额" align="center"></el-table-column>
    <el-table-column
        prop="updatedAt"
        label="交易时间"
        align="center">
         <template slot-scope="obj">
            {{ obj.row.updatedAt | formatDate }}
          </template>
      </el-table-column>
    <!-- <el-table-column prop="updatedAt" label="交易时间" align="center"></el-table-column> -->
  </el-table>
</div>
</template>

<style>
.mCard{
border: 1px solid skyblue;
 margin-bottom: 15px;
 margin-left: 5px
}
</style>

<script>
import { getExpenditure } from '@/api/platformExpend'
import { mapGetters } from 'vuex'

export default {
  data () {
    return {
      formList: {
        store: true,
        user: true,
        tradeType: true,
        order: true,
        // date: true
      },
      tableData: [],
      storeMoney: 0,
      userMoney: 0
    }
  },
  computed: {
    ...mapGetters([
      'expenditures'
    ])

  },
  created () {
    this.getGoodsList()
  },
  methods: {
    async getGoodsList () {
      this.tableData = await getExpenditure()
      console.log(this.tableData);
      this.storeMoney = this.comp('店铺提现')
      this.userMoney = this.comp('用户提现')
    },
    btnSearch (formData) {
      const { store, user, tradeType,order } = formData
      // console.log(order.toString());
      if (store || user || tradeType||order) {
        const arr = this.tableData.filter(item => item.storeName === store || store === '').filter(item => item.storeId === String(user) || user === '').filter(item => item.withdrawalOrder === order || order === '').filter(item => item.transactionType === tradeType || tradeType === '')
        this.tableData = arr
        this.$refs.resetForm.btnReset()
      } else {
        this.getGoodsList()
      }
    },
    comp (shuxing) {
      const arr = []
      this.tableData.forEach(item => {
        if (item.transactionType === shuxing) {
          arr.push(item.withdrawalAmount)
        }
      })
      const result = arr.reduce((a, b) => {
        a = Number(a) + Number(b)
        return a
      }, 0)
      return result
    }
  }
}
</script>
